How To Add Flag Counter Widget in Blogger ?

You might have seen visitors count with country flags on many blogs. Flag counter widget displays visitors count with their country flags/names. Bloggers use flag counter widget on their blogs to show that from where they're getting most of their traffic and to show their page-views. If you are a blog/website owner and you're looking to show a visitors/flag counter on your blog, then you're at right place. Today in this article we are going to learn How to Add Flag Counter widget to your Blogger Blog.

How to Add Flag Counter widget to your Blogger Blog

First of all go to http://www.flagcounter.com/. You'll see a plenty of options on that page for
Customization
1- Select Top Countries to display the visitors of top countries. Select Flag Map to display a map.
2- Select maximum number of flags to show
3- Choose its background color
4- Select the number of columns and text color
5- Choose its border color and make other necessary customization
Check your widget in preview section, if widget is perfect in preview section, click "Get your Flag Counter"

 It'll ask you to register, register your flag counter or click on Skip.
On the next page you'll see two codes, the first one for websites and the second one for forums. Copy the code for websites.

STEPS

Step 1. Log in to your Blogger dashboard and click on your blog
Step 2. Go to "Layout" and click the "Add a gadget" link on the right side
Step 3. From the pop-up window, scroll down and select the "HTML/JavaScript" gadget:

Step 4. Paste the code of the chosen widget found below it.
Step 5. Hit the "Save" button... and that's All
You Have Done!

How to Show Most Commented Posts in Blogger ?

One of the best gadgets for your Blogger blog is a popular posts widget for your sidebar. This lets visitors see what your trending posts are right now and encourages them to click on them to read them. This basic widget is just a little too basic, however, for the modern day website visitor. Not only do they want to see your trending posts, but they also want to join the discussions that are happening on your blog. To do that, you'll need a most commented posts widget for Blogger.

Having a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you're going to need a few specific things to help you out.

Here's What You're Going To Get

There are certain aspects in the design of a most commented posts widget that you should expect. That's why you'll find these specific components with this custom widget:

• Ordered by popularity. The posts that have the most comments are the most likely to have visitors want to read the post and join in with the conversation. By ordering your posts based on the popularity of them, you'll give each visitor the chance to see what the hype really is about! This lets you have a charted graphic that gives a visitor easy recognition, but also allows you to keep it straight and aligned if you're looking for a cleaner look.

• Graphic incorporation. Blog posts that have at least one graphic incorporated with them will receive 100% more traffic than posts that have no images at all. For every graphic that you include with a blog post, the more likely you are to get a click! The same is true with your most commented posts widget, so be sure to incorporate graphics that stand out with your design.

• Descriptions that blend in. The internet today revolves around the value that you can provide each individual user. People don't just click on things because they look visually tempting. They click on them because they promise a level of value that another website like yours isn't able to provide. By having descriptions that blend in, you'll be able to enhance the perceived value that your site can provide. This leads to more clicks!
  

Add the Most Commented Posts Widget to Blogger

Step 1. Log in to your Blogger account and go to Template, press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type the following tag inside it and hit Enter to find it:

</Group>

Step 3. Just below </Group>, add this code:

<Group description="Most Commented" selector=".most-commented">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>

Note: if you can't find the </Group> tag, try to find the following tag instead and add the variables just below it:

<b:skin><![CDATA[

Step 4. Now search for the following tag (CTRL + F):

]]></b:skin>

Step 5. And just above it, add this CSS code:

.comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}

Step 6. Save the template.

Now, let's add the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the "Layout" section of your Blogger dashboard and click on the "Add a gadget" link on the right side. From the pop-up window, scroll down the list and select the "HTML/JavaScript" gadget:

 Copy and paste this script inside the content box:

<script type="text/javascript">
function stripTags(s,n) {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
    var i;
    for (i = 0; i < feed.count ; i++) {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://www.kingoftricks.tk
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span>

Here, change http://www.kingoftricks.tk with your blog URL. If you want to add more characters to the description, modify the "10" value in red from "postDescription,10".

If you want a more simple look (without the thumbnails and post snippets), add this script instead:

<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://www.kingoftricks.tk
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span>

.... and replace http://www.kingoftricks.tk with your address.
To add the "comments" text after the comments number, replace the line in red:

<div class="comment-count">' + postComments + "</div>"

with:

<div class="comment-count">' + postComments + " comments" + "</div>"

Once you have finished adding your own settings, press the "Save" button to enable the gadget in the sidebar of your blog. That's it!

(This Article Brought To You By Helplogger)

How to Show Random Posts in Blogger ?

Since your blog is more like a diary or because of its natural structure sometimes old articles gets neglected and hardly gets any visitors directly from your website. New users joins your website, takes complete benefit from it but never bother to visit your old good articles. However, a simple way to bring back attention to your old articles is to display them somewhere in your sidebar. Today in this article, we will show you how to display random posts in blogger.

What is Random Posts Widget?

This widget displays a list of random posts from your blog providing the ability to your visitors to read your good articles from the paste. On the other hand, this widget is probably ideal for bringing back limelight to some of your posts that are buried in your blog achieve. Before, you add this widget in your blog check out the screenshot below of this widget:

How to display Random Posts in Blogger?

This tutorial consists of two parts, in the first one we’ll be adding CSS of the widget and in the other half we will add the main structure coding on the widget. So, the very first thing you need to do is to login into your blogger account and go to Template >> Edit HTML. Now in the blogger template editor, search for ]]></b:skin> tag and just above it paste the following code.

ul#random-posts img {
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
}
ul#random-posts li {
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.rp-info {
    font-style: italic;
}
.rp-snippet {
    font-style: normal;
}
ul#random-posts a {
    font-weight: bold;
}

Till here, you have successfully installed CSS codes to your template, now it’s time to add main structure coding. It depends on you, where you would like to display random posts on your blog but popular blogs always recommends adding it in your sidebar. So, go to Layouts >> Add a Gadget >> Add HTML/JavaScript >> just paste the below coding in the HTML box.

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=80;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEANBOesVj3OXFH6J7gpjEIQzWl9fSCf9EgzCYbfVSCjfaATRt3Gj9NTb7WRGLaoburKlglx752GF82_O_O-3OqgA4CM_PktldaRCCvb8ZjHTD4oOwB0O3LbYau3fEiC5LweLmHIeHH5Y/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Customization:

1. You can increase the number of post to display, just change '5' to any other. 
2. You can increase the summery of the post, just change '80' to any other.
3. By default it display's date and comments on the post, you can disable it by changing var rdp_info='yes'; to no. 

Once everything is done, you may save the widget by pressing “Save” button and that’s it. You have successfully added random posts with thumbnail on your blogger site.

(This Article Brought To You By MBL Networks)

5 Cool Recent Post Widget for Blogger

For bloggers that pride themselves on always staying up-to-date with new content, a recent post widget for Blogger can be an invaluable tool. A recent post widget for blogger is in many ways similar to a 'breaking news alert' that journalists love to use during their reports, providing the most recent and relevant posts that you have to offer.

Adding a recent post widget for Blogger helps to reduce the dependency on email marketing, because you don't have to send out an email just to let people know you made a new post. Instead, it updates automatically for everyone to see. You can then use this information to design scheduled email newsletters, and take advantage of what's often referred to as the 'Twitter effect' where audiences will regularly check back on your site for the possibility that new posts are available. Without this, you force people to do run their own search for information and content, increasing the likelihood that they'll leave the site and hurt your bounce rate.

Once you've managed to attract visitors to one of your posts using the recent post widget for Blogger, it will continue to act as an accessible secondary resource to navigate around your site. That way, you can avoid having them sifting through old content that might be outdated. If you'd rather show off some of your best posts instead of your most recent posts, you can do that instead, or add that feature to the bar with just a few alterations.

Apart from looking great and taking up minimal space, there are too many benefits for you not to have a recent post widget for Blogger. The best part about these add-ons is that they come in a wide variety of designs that will fit any theme. If you're interested in adding a widget to your site, here are 5 cool recent post widgets that might catch your eye and fit perfectly with your Blogger template:

Style 1

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Style 2

<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

Style 3 

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Style 4

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

 Style 5

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

How to Add Recent Posts Widget on Blogger

Want to add one of the styles above? Just follow the following steps below:

Step 1. Log in to your Blogger dashboard and click on your blog
Step 2. Go to "Layout" and click the "Add a gadget" link on the right side
Step 3. From the pop-up window, scroll down and select the "HTML/JavaScript" gadget:

 Step 4. Paste the code of the chosen widget found below it.
Step 5. Hit the "Save" button... and that's All

If You Face Any Kind Of Problem Feel Free To Comment Below

Add 6 Stylish Custom Search Boxes To Blogger

There's an unspoken rule in the world of web design that says that every website have a search box. You can, and should, design a custom search gadget to Blogger that contributes to the theme of your site while providing some key benefits to both your customers and you.

Benefits to Customers

Search boxes not only help to increase your website's design usability, but they're very convenient to site visitors and regulars. For those that have been to your site before, they know what they want and they want it now. These are the impatient people who don't feel like wading through different links. If you don't accommodate this problem you might risk losing those readers.

For newer customers who want to get a feel for your site before investing any more time, it gives them the chance to look for their interests on both eCommerce sites and blog sites.

Benefits To You

Adding a custom search gadget to Blogger perhaps best benefit eCommerce sites because it's an industry that inherently offers a lot of very specific products. For instance, if you sold clothing apparel and someone was only look for shirts, the search would result would only bring up shirts so that person can look through everything in one place.

Bloggers might not have products to offer, but adding a custom search gadget to Blogger can help site analytics and SEO. Google Analytics offers a tool that will track all the searches performed by your search bar, so that you can use this data when improving your keyword usage and content choices. Google web crawlers and search engine bots will also test out phrases in these boxes on the rare occasion to make sure that all your content leads to somewhere creates a closed loop.

Add Your Own Custom Search Gadget To Blogger

Just because you should have a search bar doesn't mean you you're restricted to what time. Your site's search bar should be easy to find and readily available whenever someone needs it, but other than that the look of the design is up to you. If you want to add a custom search gadget to Blogger, here are 6 stylish choices to pick from. Just copy the code below the search box that you want to add and follow the steps below :

<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKCeW1GGNyHed2qOlLw_72ox0hrxsQsVa2mF8ckAGFR6S71gMGeLqGTqRBtNQALwwSAozeSA1bExuEkP-mFmP8HmnWC5XvmM3tHMJe-JgQ847S4rEDrglbcr_5YnanvfNCf_5uil5j2w2/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKCeW1GGNyHed2qOlLw_72ox0hrxsQsVa2mF8ckAGFR6S71gMGeLqGTqRBtNQALwwSAozeSA1bExuEkP-mFmP8HmnWC5XvmM3tHMJe-JgQ847S4rEDrglbcr_5YnanvfNCf_5uil5j2w2/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsfOUArku_MFOrqgWDROXyjQRZCFkcxTOXRwcrRMrW1xjuBBtsSWIuVIKF7KO7HTG52iT0Ukliv_a76ipYxWfjbJuVfPhpOBxSWAKhVn7yQuCrz3bfcflFFXwa2iJyN000Q8Ismw79O4d/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWFOo-SOhOFp1S0WJ6O5t1mFqlXMl2gXC-BxzMQryPWXhbDWq6zERDPn09uuBKGYfS0N6Ar3JS-UXOnTgvhYMKFhkzxuXOL9ib802u0POb8Zz_Ns3ACi_VYLO5Xf5sevZef9L3OVQh5Mxq/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ssEya-h_8RJjknAjPwNYjJxhz8UNCpfYQXG6LgvFxzYZZ5SyMKdhXzp9Nr2VKk0oIGrwYtViH_ssUsudS-P6w08A77cNIUaJs_JdtMSKt22_KJQclaYONg-MeGMnM29aw2gMaKhTcRd_/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFdBn79-C4jCCfwZpa7obR4uZYGafWEPyRbe6hJs2of4ZwFP-gwWURuMP5O1vM02OlgqlD0kbGsGryca3EjppWAfjkW7Hma8bt1U1SM0WhExmvgEWF072Xe8t8-kAgd1HtaTRXV8WnmpmP/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFdBn79-C4jCCfwZpa7obR4uZYGafWEPyRbe6hJs2of4ZwFP-gwWURuMP5O1vM02OlgqlD0kbGsGryca3EjppWAfjkW7Hma8bt1U1SM0WhExmvgEWF072Xe8t8-kAgd1HtaTRXV8WnmpmP/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
</form>

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4yObK8v_XBFOI7rGpOTEDzOeQrgRpCsgjwKAt7S1t22RymPsabCev16o76RAM0sWEcgqkOXobdoVVlZu_UZmy2JzBn1u1sToik2gG89qIORrrYpLuPpb06h-RlZlphj-zMCsgLSOkwpwe/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQ26YHlDo4nXHFQLuSejknJEZMlXJAf7jg1vGmQyzvoPHKtvj9HvhkdlMlTZAVDXYPg9SpBGfPTaP_kGxmMsvTS_3t3fv_1xfTF16vXx0ew5Bfc0_14NVdtAVN9ezmkI_BVgFHIOWYpt2/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6S__wWr8wgmIYkpYA4nfeapJdnKZe2U3UtT14nSx-YdJgmQJc3S1Vc7g_DPaqTZHm5uPTiWlJt1inBrWfExQYrrIVn_tN_taHRt-yrOzwJ0iP6f40ubKWh7WmDSfTh2gx5ksbb2Ml-KF/s1600/search-button-hover.png) no-repeat;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikt-OdURDeFqW9xPUvr0DbUtzumwSxpUnrqFhGDARSkF6aE-uCtgiea-eU0HQI9uj32eKiAVw5lIMRU601og7o5Dk5MRKonKyrdcD3GnT96IdWwE8Z67iKxTyd33iz5ToxMgRnmhKk7i7q/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2tq7xJJLXwD-4agG8VtQb74BaN6lUjO5nwtCDQ0L5l0wMC0stf2Em_HusFLFUhEE8Mitl57ObU7D-zqpHKZbILDjpvFxxRpl1HEFDthrLfas2r8s0qllSZUN4dXu9BUG9BYWjoyCL2UP/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGwe2nEpdVIwLtSCFXlOIH14b8blBUrU1u7oYExxao2YtfQKK90fXLPAN9tBq1m37tWWYqONE6ek81rhgRqcZgAX0dUDh94VozlhjDcr3oJSCEX0dmrqTVc4qEuIS9vNQeWaznWib2OeC/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGwe2nEpdVIwLtSCFXlOIH14b8blBUrU1u7oYExxao2YtfQKK90fXLPAN9tBq1m37tWWYqONE6ek81rhgRqcZgAX0dUDh94VozlhjDcr3oJSCEX0dmrqTVc4qEuIS9vNQeWaznWib2OeC/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifr0cLbLsm8sd7A-iOvcpjilpOVzAVzf5aTiniYfrlla4TVjTIc0mZ5gm3ibmU97aywyQYySNcGT5isS1imcmM-wWbGJjxhlKxi6gqMOrLIwAx7Cfy22Ma2YQ0uPUNEHz1yS4AIx4o_D9G/s1600/search-box.png) no-repeat;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjY8pOw6_xLV4-uH0umO3xShMsDcFK0G_gdySZke4WjN5zV3zKhZ5aLVuP-9-DwFuH1Fp_n5rtJtYnMyGbvo_ZEccrZ0RWbNbi1VlqulL5EgE_Xe0MOk1VxZGuTGv2XthETNbWJjImtiAr/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-ybr6V_YWhv38UzE9CAr58L7GbkSpnOJQovNE8sp56XYjHzoQLtuDpM-Qh8sO0AgT11MtltThVSCTkWwv5Tz4ugcZq3tdbnbSRib8-IHy7-dBPWygRkVvx1Tc15Dsp_8f7nSKq0emz84/s1600/search-icon-hover.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Steps: How to Add a Custom Search Box to Blogger

Step 1. Log in to your Blogger account, then go to Layout > click on the 'Add a gadget' link on the left side.

Step 2. Choose HTML/JavaScript from the pop-up window > paste the code of the search box inside the empty box.

Step 3. Press Save.

This is All!!

There you have it, 6 stylish choices that will let you take advantage from all the great benefits of using a search box, while still helping you make your blog stand out. After adding your new search bar, your visitors will be able to navigate through your site and get to the same place using both the box and the navigation bar.

If You Face Any Kind Of Problem Feel Free To Comment Below

Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social networks.

This floating social bar has the following options: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you want.

How to add the scrolling social bookmarking bar

Step 1. Log in to your Blogger Dashboard, select your blog and go to Layout 

Step 2. Click on Add A Gadget.

Step 3. From the pop-up window, scroll down and select HTML/Javascript

Step 4. Copy the code below and paste it inside the empty box.

<style type="text/css">
#social-buttons {
position:fixed;
bottom:15%;
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from www.kingoftricks.tk">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='KingOfTricks' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://www.kingoftricks.tk/">widget</a></div></div></div>

Step 5. Save the gadget.

Customization

• Vertical alignment - Change the 15% value of bottom. The code positions the social bar relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.

• Horizontal alignment - Change the -721px value from margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.

• Twitter setting - Replace KingOfTricks with your Twitter username

• Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code:

<div class='sbutton'> BUTTON CODE HERE </div>

Done!!

If you face any kind of problem feel free to comment below

Bubble Buttons For Blogger Animated CSS3

Today we will add some cool CSS3 bubble buttons to blogger blog which are officially designed by
TutorialZine.These bubble buttons are made with pure CSS3 and on mouse hover the bubble star shaking and this effect makes these button more beautiful.This button is available in four color themes and three sizes so that you can add any button of any size just by just changing the class name of button.

Live Demo

How To Add Animated CSS3 Bubble Buttons To Blogger ?

For easy and better in understanding here I am dividing this article in two parts.

1. CSS Part
2. HTML Part  
   

   CSS Part

1. Go to Blogger Dashboard > Template
2. As always take a backup of your template
3. Search for below code in your template

]]></b:skin>

.button { font: 15px Calibri, Arial, sans-serif; /* A semi-transparent text shadow */ text-shadow: 1px 1px 0 rgba(255,255,255,0.4); /* Overriding the default underline styling of the links */ text-decoration: none !important; white-space: nowrap; display: inline-block; vertical-align: baseline; position: relative; cursor: pointer; padding: 10px 20px; background-repeat: no-repeat; /* The following two rules are fallbacks, in case the browser does not support multiple backgrounds. */ background-position: bottom left; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'); /* Multiple backgrounds version. The background images are defined individually in color classes */ background-position: bottom left, top right, 0 0, 0 0; background-clip: border-box; /* Applying a default border raidus of 8px */ -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; /* A 1px highlight inside of the button */ -moz-box-shadow: 0 0 1px #fff inset; -webkit-box-shadow: 0 0 1px #fff inset; box-shadow: 0 0 1px #fff inset; /* Animating the background positions with CSS3 */ /* Currently works only in Safari/Chrome */ -webkit-transition: background-position 1s; -moz-transition: background-position 1s; transition: background-position 1s; } .button:hover { /* The first rule is a fallback, in case the browser does not support multiple backgrounds */ background-position: top left; background-position: top left, bottom right, 0 0, 0 0; } .button:active { /* Moving the button 1px to the bottom when clicked */ bottom: -1px; } /* The three buttons sizes */ .button.big { font-size: 30px; } .button.medium { font-size: 18px; } .button.small { font-size: 13px; } /* A more rounded button */ .button.rounded { -moz-border-radius: 4em; -webkit-border-radius: 4em; border-radius: 4em; } /* Defining four button colors */ /* BlueButton */ .blue.button { color: #0f4b6d !important; border: 1px solid #84acc3 !important; /* A fallback background color */ background-color: #48b5f2; /* Specifying a version with gradients according to */ background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); } .blue.button:hover { background-color: #63c7fe; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); } /* Green Button */ .green.button { color: #345903 !important; border: 1px solid #96a37b !important; background-color: #79be1e; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317)); } .green.button:hover { background-color: #89d228; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e)); } /* Orange Button */ .orange.button { color: #693e0a !important; border: 1px solid #bea280 !important; background-color: #e38d27; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f)); } .orange.button:hover { background-color: #ec9732; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b)); } .gray.button { color: #525252 !important; border: 1px solid #a5a5a5 !important; background-color: #a9adb1; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c)); } .gray.button:hover { background-color: #b6bbc0; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuJTgUlyhWOmoWncytETNLKxUrsC3F0uI11W3C5Y87mbdenhoHGmNPOc2qJJ_nu4l_6yq-CO1n0Uwsb9FWHlJ47e7D0IrSqMiUh2jVTPi44yuZ5E9-T2ecOdy_1h1rgMrDVEEh9l_WDc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9)); }

Now we have integrated the CSS part in the template let's see how to use them.
  HTML Part
 Here I am listing button's HTML part according to their sizes.First choose size of button then choose color of button.

HTML code For Big Button (Choose anyone according to button color)

 <a href="LINK HERE" class="button big blue">TEXT HERE</a>
<a href="LINK HERE" class="button big green">TEXT HERE</a>
<a href="LINK HERE" class="button big orange">TEXT HERE</a>
<a href="LINK HERE" class="button big gray">TEXT HERE</a>

HTML code For Medium Button (Choose anyone according to button color)

 <a href="LINK HERE" class="button blue medium">TEXT HERE</a>
<a href="LINK HERE" class="button green medium">TEXT HERE</a>
<a href="LINK HERE" class="button orange medium">TEXT HERE</a>
<a href="LINK HERE" class="button gray medium">TEXT HERE</a>

HTML code For Small Button (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>

HTML code For Small Rounded Buttons (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
 <a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

Now replace "LINK HERE" with the link which you want to add it to button and replace "TEXT HERE" with the text which you want to appear on your button.

All Done !!

If you face any kind of problem feel free to comment below